<template>
  <div class="body">
    <div class="list-Top">
      <div class="list-screen">
        <!-- 下拉区域 -->
        <div class="list-select region">
          <CasSelect
            :columns="columns1"
            :title="'区域'"
            @openSelect="openSelect"
          ></CasSelect>
        </div>

        <div class="list-select mode">
          <CasSelect
            :columns="columns2"
            :title="'方式'"
            @openSelect="openSelect"
          ></CasSelect>
        </div>
        <div class="list-select RentQuery">
          <CasSelect
            :columns="columns3"
            :title="'租金'"
            @openSelect="openSelect"
          ></CasSelect>
        </div>
        <div class="list-select Combined">
          <van-cell
            @click="showPopup"
            :style="{ width: '100%', height: '100%' }"
            >筛选<van-icon name="arrow-down"
          /></van-cell>
          <van-popup
            v-model="show"
            :style="{ width: '80vw', height: '100vh' }"
            position="right"
            @click-overlay="show = false"
          >
            <div class="content">
              <div class="House-type">
                <p>户型</p>
                <div class="count-type">
                  <span
                    class="type-context"
                    :ref="item.value"
                    v-for="item in condition.roomType"
                    :key="item.value"
                    @click="countType(item.value, 'roomType')"
                    >{{ item.label }}</span
                  >
                </div>
              </div>
              <div class="House-type">
                <p>朝向</p>
                <div class="count-type">
                  <span
                    class="type-context"
                    :ref="item.value"
                    v-for="item in condition.oriented"
                    :key="item.value"
                    @click="countType(item.value, 'oriented')"
                    >{{ item.label }}</span
                  >
                </div>
              </div>
              <div class="House-type">
                <p>楼层</p>
                <div class="count-type">
                  <span
                    class="type-context"
                    :ref="item.value"
                    v-for="item in condition.floor"
                    :key="item.value"
                    @click="countType(item.value, 'floor')"
                    >{{ item.label }}</span
                  >
                </div>
              </div>
              <div class="House-type">
                <p>房屋亮点</p>
                <div class="count-type">
                  <span
                    class="type-context"
                    :ref="item.value"
                    v-for="item in condition.characteristic"
                    :key="item.value"
                    @click="countType(item.value, 'characteristic')"
                    >{{ item.label }}</span
                  >
                </div>
              </div>
              <div class="footer-btn">
                <span @click="clearbtn" class="clear">清除</span>
                <span @click="commitbtn" class="add">确定</span>
              </div>
            </div>
          </van-popup>
        </div>
      </div>
      <TopTitle></TopTitle>
      <!-- 顶部输入框 -->
      <div class="top-search-title">
        <!-- 城市按钮 -->
        <span class="city-btn" @click="cityGoto"
          >{{ cityName }}<van-icon name="play" class="vant-icon-plat"
        /></span>
        <van-search
          v-model="value"
          placeholder="请输入小区地址"
          class="input-serch"
        />
      </div>
      <!-- 地图标记 -->
      <van-icon
        name="location-o"
        class="Map-icon"
        @click="$router.push('/map')"
      />
    </div>
    <!-- 筛选组合 -->

    <!-- <div
      class="box"
      style="background-color: pink; width: 100%; height: 90px"
    ></div> -->
    <HouseList @requestApi="requestApi" :renderList="renderList"></HouseList>
  </div>
</template>

<script>
let arr = 'a'
arr.split('')
console.log(arr)

import TopTitle from '@/components/TopTitle.vue'
import HouseList from '@/components/HouseList.vue'
import TopSearch from '@/components/TopSearch.vue'
import CasSelect from '@/components/CasSelect.vue'

import { dataHandle, LabelOrText } from '@/utils/storage'
import { housesList, condition } from '@/api/Interface'

export default {
  components: {
    TopTitle,
    HouseList,
    TopSearch,
    CasSelect,
  },
  data() {
    return {
      value1: 0,
      // option: [{ text: '区域', value: 0 },],
      columns1: [],
      columns2: [],
      columns3: [],
      value: '',
      activeFlag: false,
      cityName: '上海',
      parmas: {
        cityId: 'AREA|dbf46d32-7e76-1196',
        // area: null,
        // subway: null,
        // rentType: null,
        // price: null,
        // more: null,
        // roomType: null,
        // oriented: null,
        // characteristic: null,
        // floor: null,
        // start: null,
        // end: null,
      },
      renderList: [],
      show: false,
      condition: {},
    }
  },
  methods: {
    // 弹出右侧搜索条件
    showPopup() {
      this.show = true
    },

    cityGoto() {
      this.$router.push('/city')
    },
    requestApi() {},
    // 下拉框筛选事件
    // onConfirm() {
    //   console.log(this.$refs)
    //   this.$refs.item.toggle()
    //   this.$refs.item.getValues()
    // },
    // 按钮确认事件
    async openSelect(typey, id, suy) {
      console.log(id, typey)

      if (typey === '区域') {
        ;[...id][0] === 'A'
          ? (this.parmas.area = id)
          : (this.parmas.subway = id)
        // this.parmas.subway = suy
        const res = await housesList(this.parmas)
        this.renderList = res.body.list
      } else if (typey === '方式') {
        this.parmas.rentType = id
        const res = await housesList(this.parmas)
        this.renderList = res.body.list
      } else if (typey === '租金') {
        this.parmas.price = id
        const res = await housesList(this.parmas)
        this.renderList = res.body.list
      }
    },
    // 复合查询事件
    countType(value, type) {
      this.$refs[value][0].classList.length === 2 ? 
        this.$refs[value][0].classList.remove("active")
        : this.$refs[value][0].classList.add("active")

      this.parmas.more ? this.parmas.more : (this.parmas.more = [])
      if (this.parmas.more.find((item) => item === value)) {
        this.parmas.more = this.parmas.more.filter((item) => item !== value)
      } else {
        this.parmas.more.push(value)
      }
    },

    clearbtn() {
      console.log(Object.keys(this.$refs));
      Object.keys(this.$refs).map(item => {
        this.$refs[item][0].classList.remove('active')
      })
       this.parmas.more = null
    },

    async commitbtn() {
      this.show = false
      this.parmas.more = this.parmas.more ? this.parmas.more.join(',') : null
      const res = await housesList(this.parmas)
      this.renderList = res.body.list
      this.parmas.more = this.parmas.more.split(',')
    },
  },

  async created() {
    // 判断有没有默认选择的城市，如果没有就用上海
    JSON.parse(localStorage.getItem('labelCity')) &&
      (this.parmas.cityId = JSON.parse(localStorage.getItem('labelCity')).value)

    JSON.parse(localStorage.getItem('labelCity')) &&
      (this.cityName = JSON.parse(localStorage.getItem('labelCity')).label)
    let cityid = ''
    if (JSON.parse(localStorage.getItem('labelCity'))) {
      cityid = JSON.parse(localStorage.getItem('labelCity')).value
    } else {
      cityid = 'AREA|dbf46d32-7e76-1196'
    }
    // 发起获取列表数据请求
    const res = await housesList({ cityid })
    this.renderList = res.body.list
    this.parmas.cityId = cityid

    //发起获取查询条件请求
    const data = await condition({ id: cityid })

    // 获取区域筛选条件
    this.condition = data.body
    this.columns1.push(dataHandle(data.body.area)) //使用加工方法
    this.columns1.push(dataHandle(data.body.subway))
    this.columns2 = LabelOrText(data.body.rentType)
    this.columns3 = LabelOrText(data.body.price)
  },
}
</script>

<style lang="less">
// *{
//   box-sizing: border-box;
//   margin: 0;
//   padding: 0;

// }
.body {
  padding-top: 27vw !important;
}
.list-screen {
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: aqua;
  z-index: 300;
  .list-select {
    width: 25%;
  }
}

.top-search-title {
  z-index: 110;
  position: absolute;
  position: fixed;
  top: 7px;
  left: 50px;
  width: 100%;
  height: 30px;
  padding: 0 5px;
  // background-color: rgba(0, 0, 0, 0);
  background-color: #fff;
  border-radius: 5px 5px;
  overflow: hidden;
  display: flex;
  align-content: center;
  width: 70%;
  margin-bottom: 50px;
}
.input-serch {
  width: 200px;
  height: 29px;
  background-color: #fff !important;
  color: #9c9fa1;
  padding-left: 0px;
}
.vant-img-swipe {
  width: 100%;
}
.city-btn {
  height: 15px;
  font-size: 14px;
  line-height: 15px;
  padding-right: 10px;
  background-color: #fff;
  // border-radius: 3px  0 0 3px;
  border-right: 1px solid #e5e5e5;
  margin-top: 8px;
}
.vant-icon-plat {
  transform: rotate(90deg);
  font-size: 14px;
}
.Map-icon {
  z-index: 110;
  position: absolute;
  position: fixed;
  top: 12px;
  right: 10px;
  font-size: 20px;
  color: #fff;
  width: 25px;
  height: 25px;
}
.list-Top {
  // background-color: pink;
  position: relative;
  position: fixed;
  top: 46px;
  width: 100%;
  z-index: 110;
  margin-bottom: 50px;
}
.type-context {
  display: inline-block;
  height: 32px;
  width: 70px;
  margin: 0 18px 15px 0;
  border: 1px solid #ddd;
  border-radius: 3px;
  line-height: 32px;
  text-align: center;
  font-size: 12px;
  color: #888;
}
.content {
  position: relative;
  width: 100%;
  height: 100%;
}
.House-type {
  padding: 0 15px 0 15px;
  p {
    font-size: 15px;
    color: #333;
    margin: 20px 0;
  }
  .count-type {
    width: 210px;
    // height: 156px;
    // background-color: pink;
    margin-left: 50px;
    margin-right: 100px;
    border-bottom: 1px solid #ddd;
  }
}
.footer-btn {
  z-index: 100;
  position: fixed;
  position: sticky;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 50px;
  display: flex;
  .add {
    flex: 7;
    height: 100%;
    background-color: #21b97a;
    color: #fff;
    font-size: 16px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 50px;
  }
  .clear {
    text-align: center;
    line-height: 50px;
    flex: 3;
    background-color: #fff;
  }
}
.active {
  border: 1px solid #21b97a;
  color: #21b97a;
  background-color: #defaef;
}
</style>
